<template lang="html">
  <div id="pageBox">
    <ul class="list">
      <li class="item" v-for="(v,i) in catalogList" :key="i" @click="goDetail(v.id)">
        <div class="imgBox">
          <img :src="v.coverImg" alt="">
        </div>
        <div class="content">
          <div class="title overflow2">
            {{ v.title }}
          </div>
          <div class="tagAndstatus">
            <span v-if="v.resourceType" class="tagItem voice">{{ v.resourceType }}</span>
            <span v-if="v.freeExperience" class="tagItem try">试听</span>
            <!-- <span class="status">未学习</span> -->
          </div>
          <div class="starttime">开始时间: {{ v.startTime | parseTime }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props:["catalogList"],
  data(){
    return {

    }
  },
  methods:{
    goDetail(id){
      this.$router.push({path: '/unitDetail', query:{id}})
    },
  }
}
</script>

<style lang="less" scoped>
  #pageBox{
    .list{
      width:100%;
      .item{
        width:100%;
        padding-bottom:20px;
        margin-bottom:20px;
        border-bottom:1px solid #dedede;
        display: flex;
        &:last-child{
          border:none;
        }
        .imgBox{
          width:1.6rem;
          max-width:160px;
          height:0.9rem;
          background:#999;
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .content{
          flex:1;
          padding-top:4px;
          padding-left:10px;
          overflow:hidden;
          .title{
            font-size:0.16rem;
            font-weight: bold;
          }
          .tagAndstatus{
            margin-top:16px;
            width:100%;
            overflow:hidden;
            .tagItem{
              float:left;
              margin-right:4px;
              font-size:0.12rem;
              line-height: 0.12rem;
              padding:2px 6px;
              border-radius: 2px;
              border:1px solid #dedede;
              &.voice{
                color:#4444FF;
                border-color:#4444FF;
              }
              &.try{
                color:#E4C64E;
                border-color:#E4C64E;
              }
            }
            .status{
              float:right;
              margin-right:4px;
              color:#999;
              line-height: 0.2rem;
              font-size:0.12rem;
            }
          }
        }
      }
    }
  }
  .starttime{
    margin-top: .1rem;
    font-size: 12px;
    color: #888;
  }
</style>
